<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			店铺审核
		</view>
		<view class="base-box" v-if="!loading" >
			<view class="base">
				<u-table class="u-table-basic"  align="left">
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							基础信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							店铺名称
						</u-td>
						<u-td class="u-table-td "  >
							{{data.title}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							店铺评分
						</u-td>
						<u-td class="u-table-td "  >
							{{data.score.grade}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							分类标题
						</u-td>
						<u-td class="u-table-td "  >
							{{data.type.title}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							地址
						</u-td>
						<u-td class="u-table-td "  >
							{{data.area.province}}-{{data.area.city}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							详细地址
						</u-td>
						<u-td class="u-table-td "  >
							{{data.area.address}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							标签数组
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								<u-tag  v-for="item in data.label" :text="item" mode="plain" style="margin-right: 5px;" /> 
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							最近一条评价
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								{{data.comment.text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							订单量
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								{{data.order}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							技师数量
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								{{data.technician}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							店铺状态
						</u-td>
						<u-td class="u-table-td "  >
							<view :class="!data.status.value?'uni-color-success':'uni-color-error'" >
								{{data.status.text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							审核状态
						</u-td>
						<u-td class="u-table-td "  >
							<view :style="`color:${onExamColor(data.examine_status.value)}`">
								{{data.examine_status.text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							创建时间
						</u-td>
						<u-td class="u-table-td "  >
							<uni-dateformat :date="data.create_date"></uni-dateformat>
						</u-td>
					</u-tr>
					
				</u-table>
			</view>
			<view class="base">
				<u-table class="u-table-basic"  align="left" >
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							图片信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td" width="104px" >
							店铺LOGO
						</u-td>
						<u-td class="u-table-td "  >
							<view class="flex-layout">
								<u-image width="70px" height="70px" :src="data.logo"
									@click="eventImage(data.logo)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td" width="104px" >
							营业执照
						</u-td>
						<u-td class="u-table-td "  >
							<view class="flex-layout">
								<u-image width="170px" height="120px" :src="data.business_license"
									@click="eventImage(data.business_license)"></u-image>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		<view class="util-button" v-if="!loading" >
			<view class="">
				<u-button type="primary" @click="this.showExamSuccess = true;" size="mini" :disabled=" data.examine_status.value == 1" >
					审核通过
				</u-button>
			</view>
			<view class="">
				<u-button type="error" size="mini" @click="this.showExamError = true"  :disabled="data.examine_status.value == 1" >
					审核拒绝
				</u-button>
			</view>
			<view class="">
				<u-button type="info" size="mini" @click="onBack" >
					返回列表
				</u-button>
			</view>
		</view>
	</view>
	
	<u-modal v-model="showExamSuccess"
		content="请确保该店铺每一项都正确无误，确定要通过审核吗？"
		title="审核通过"
		confirm-text='审核通过'
		cancel-text='关闭'
		@confirm="onExamSubmit"
		show-cancel-button
	></u-modal>
	<u-popup v-model="showExamError" mode="center" closeable border-radius="10">
		<view class="uni-popup-box">
			<view class="uni-global-title" >审核拒绝</view>
			<view class="">
				<textarea v-model="audit_text"
					style="width:calc(100% - 20px);height:188px;background:#f8f8f8;padding:10px;font-size:.9rem;"
					placeholder="请在此输入审核不通过原因" />
			</view>
			<view style="display: flex;gap:20px;margin-top:10px" >
				<view style="flex:1">
					<u-button type="primary" @click="onExamErrorSubmit" >
						拒绝
					</u-button>
				</view>
				<view style="flex:1">
					<u-button type="info" @click="this.showExamError = false ;" >
						关闭
					</u-button>
				</view>
			</view>
		</view>
	</u-popup>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	const collctionName  = "shop";
	export default {
		data() {
			return {
				loading:true,
				uid:'',
				data:{},
				showExamError:false,
				showExamSuccess:false,
				audit_text:'审核拒绝',
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				const field = "_id,title,logo,score,type,area,label,user_id,comment,order,technician,business_license,status,examine_status,create_date " ;
				global.getOne('shop',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					this.loading = false ;
				})
			},
			// 审核通过
			onExamSubmit(){
				this.loading = true;
				const where = {
					examine_status:{ text:'审核通过',value:1 }
				};
				global.updateData(collctionName,where,{_id:this.uid}).then( res => {
					if(res.affectedDocs == 1){
						this.$refs.uToast.show({
							title:'审核完成',type: 'success',duration:500,position:'top',
							callback:()=>{
								this.loading = false;
								uni.navigateTo({url:'./shop-examine'}) ;
							}
						})
					}else {
						this.loading = false;
						this.$refs.uToast.show({title:"网络错误请重试",type: 'error',duration:2000,position:'top' })
					}
				})
			},
			// 审核拒绝
			onExamErrorSubmit(){
				const where = {
					examine_status:{ text:this.audit_text,value:2 },
				};
				global.updateData(collctionName,where,{ _id:this.data._id}).then( res => {
					if(res.affectedDocs == 1){
						this.$refs.uToast.show({
							title:'审核拒绝',type: 'success',duration:500,position:'top',
							callback:()=>{
								this.loading = false;
								uni.navigateTo({url:'./shop-examine'}) ;
							}
						})
					}else {
						this.loading = false;
						this.$refs.uToast.show({title:"网络错误请重试",type: 'error',duration:2000,position:'top' })
					}
				})
			},
			// 审核颜色
			onExamColor(val){
				switch (val){
					case 0: return '#8c8c8c'
						break;
					case 1: return '#4cd964'
						break;
					default: return '#ef5352'
						break;
				}
			},
			onBack(){
				uni.navigateBack(1)
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		}
	}
</script>

<style>
	.util-button{
		padding:20px;
		display: flex;
		gap:20px;
		justify-content: center;
	}
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
		margin-bottom:10px;
	}
	.base{
		width: 50%;
	}
</style>
